<template>
  <div>
      <div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到好又多生鲜!</div>
			<div class="fr">
				<div class="login_info fl" v-if="username">
					欢迎您：<em>{{username}}</em>
				</div>
				<div class="login_btn fl" v-else>
					<router-link to="/login">登录</router-link>
					<span>|</span>
					<router-link to="/register">注册</router-link>
				</div>
				<div class="user_link fl">
					<span>|</span>
					<a href="user_center_info.html">用户中心</a>
					<span>|</span>
					<a href="cart.html">我的购物车</a>
					<span>|</span>
					<a href="user_center_order.html">我的订单</a>
				</div>
			</div>
		</div>		
	</div>

	<div class="search_bar clearfix">
		<a href="index.html" class="logo fl"><img src="../assets/images/logo.png"></a>
		<div class="search_con fl">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
		<div class="guest_cart fr">
			<a href="#" class="cart_name fl">我的购物车</a>
			<div class="goods_count fl" id="show_count">1</div>
		</div>
	</div>

	<div class="navbar_con">
		<div class="navbar">
			<h1 class="fl">全部商品分类</h1>
			<ul class="navlist fl">
				<li><a href="">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">手机生鲜</a></li>
				<li class="interval">|</li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>

	<div class="center_con clearfix">
		<ul class="subnav fl">
			<li><a href="#model01" class="fruit">新鲜水果</a></li>
			<li><a href="#model02" class="seafood">海鲜水产</a></li>
			<li><a href="#model03" class="meet">猪牛羊肉</a></li>
			<li><a href="#model04" class="egg">禽类蛋品</a></li>
			<li><a href="#model05" class="vegetables">新鲜蔬菜</a></li>
			<li><a href="#model06" class="ice">速冻食品</a></li>
		</ul>
		<div class="slide fl">
			<ul class="slide_pics">
				<li><img src="../assets/images/slide.jpg" alt="幻灯片"></li>
				<li><img src="../assets/images/slide02.jpg" alt="幻灯片"></li>
				<li><img src="../assets/images/slide03.jpg" alt="幻灯片"></li>
				<li><img src="../assets/images/slide04.jpg" alt="幻灯片"></li>
			</ul>
			<div class="prev"></div>
			<div class="next"></div>
			<ul class="points"></ul>
		</div>
		<div class="adv fl">
			<a href="#"><img src="../assets/images/adv01.jpg"></a>
			<a href="#"><img src="../assets/images/adv02.jpg"></a>
		</div>
	</div>
	<div class="list_model" v-for="item in data_list" :key="item.id">
		<div class="list_title clearfix">
			<h3 class="fl" id="model01">{{item.cate.name}}</h3>
			<div class="subtitle fl">
				<span>|</span>
				<a href="#">鲜芒</a>
				<a href="#">加州提子</a>
				<a href="#">亚马逊牛油果</a>
			</div>
			<a href="#" class="goods_more fr" id="fruit_more">查看更多 ></a>
		</div>

		<div class="goods_con clearfix">
			<div class="goods_banner fl"><img :src="'http://127.0.0.1:8000'+item.cate.pic"></div>
			<ul class="goods_list fl">
				<li v-for="goods in item.good_list" :key="goods.id">
					<h4><a href="#">{{goods.name}}</a></h4>
					<a href="#"><img :src="'http://127.0.0.1:8000'+goods.pic"></a>
					<div class="prize">¥ {{goods.price}}</div>
				</li>
			</ul>
		</div>
	</div>


	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京好又多生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
	data(){
		return{
			data_list:[],
			username:sessionStorage.getItem('username')
		}
	},created(){
		axios.get('http://127.0.0.1:8000/index').then(resp=>{
			console.log(resp.data)
			this.data_list=resp.data
		}).catch(error=>{
			console.log(error)
		})
	}
}
</script>

<style>

</style>